<template>
  <div class="tabbox">
    <div class="tabs" v-for="(item,index) in tabs" :key="index" @click="handleclick(index)" :class="{active: currentIndex==index}">{{item.tabName}}</div>
  </div>
</template>

<script>
import eventbus from '../utils/tools'//导入tools.js文件并命名eventbus
export default {
    //通过props接收从父组件传来的值,该值是只读的(不能修改).
    //props: ['tabs','currentIndex'] //数组形式
    data() {
        return {
            currentIndex:0
        }
    },
    props: {//接收由父组件传给子组件的数据
        tabs: { type: Array, default: [] }//对象形式, 可以对传来的数据进行类型验证
    },
    methods: {
        handleclick(index) {
            eventbus.$emit('deliverIndex', index);//触发事件并传值(借用了第二个vue实例化对象)
            this.currentIndex = index;
            console.log(this.currentIndex);
        }
    }
}
</script>

<style  lang="scss" scoped>
.tabbox {
    width: 60px;
    text-align: center;
}

.tabbox .tabs {
    margin: 15px 0;
    border-left: 3px solid transparent;
} 
.tabs.active {
    font-weight: bold;
    border-left: 3px solid red;
}
</style>